
<template>
  <div id="page1"  data-aos="fade-up"  data-aos-once='true'>
    
    <div class="page1-title">
      {{ $i18n.locale=='zh'?productName.zh:productName.en }}
    </div>
    <div class="page1-list">
      <div class="page1-item" v-for="(v,i) in productList" :key="i" @click="routerDetail(v)">
        <div class="page1-item-pic">
          <img :src="v.icon" alt="" />
        </div>
        <div class="model">
          型号
        </div>
        <div class="modelNum">
          {{ v.model }}
        </div>
        <div class="modelDetail">
          <p>
            产品分类：{{ $i18n.locale=='zh'?v.name_zh:v.name_en }}
          </p>
          <p>
            图像传感器：{{ v.sensor }}
          </p>
          <p>
            有效像素：{{ v.effe_pixels }}
          </p>
          <p>
            像元尺寸：{{ v.pixel_size }}
          </p>
            
        </div>
      </div>
    </div>
    <!-- <div class="page1-detail">
      <div class="page1-detail-l">
          <p>YW3608A</p>
          <img src="@/assets/img/productPage1.png" alt="" /></img>
      </div>
      <div class="page1-detail-r">
        <div class="label">
          VGA相机
        </div>
        <div class="introduce">
          全高清1080P
        </div>
        <div class="name"> 
          CMOS相机
        </div>
        <div class="detail">
          采用全新1080P CMOS图像传感器，传输，画质更加清晰地呈现被摄物细节，提供更卓越的图像品质内置多功能调节！
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import API from '@/utils/request.js';
// import  {useI18n } from 'vue-i18n';
import AOS from "aos";
export default {
    name:'page1',
    data(){
      return{
        id:1,
        productList:[],
        productName:{},
        lang:'zh',
        
      }
    },
    // watch: {
    //   '$i18n.locale'(newValue, oldValue) {
    //     this.lang = newValue;
    //   }
    // },
    mounted(){
      AOS.init({
          offset: 200,   
          duration: 600,   
          easing: 'ease-in-sine',   
          delay: 100
      })
      this.id = this.$route.query.id;
      this.productName = JSON.parse(sessionStorage.getItem('productName'));
      this.getCamList()
    },
    methods:{
      routerDetail(v){
        sessionStorage.setItem('productDetail',JSON.stringify(v)) 
        this.$router.push({path:'./pageDetail',query:{id:v.id}});
      },
      // 产品小类
      getCamList(){
        API.camList({series_id:this.id}).then(res=>{
            if(res.code==200){
              this.productList = res.data;
            }
        })
      },
    }
}
</script>
<style lang="scss">
#page1{
  width:100%;
  background-color: #F0F4FA;
  padding-bottom:479px;
  .page1-title{
    font-size: 70px;
    color: #273443;
    line-height: 101px;
    text-align: center;
    padding: 120px 0 150px;
  }
  .page1-list{
    width: 1340px;
    margin: 0 auto;
    @include display(center,left);
    flex-wrap: wrap;
    // padding: 0 0 0 r(150);
    box-sizing: border-box; 
    .page1-item{
      width:380px;
      height: 820px;
      background: #FFFFFF;
      padding-top: 46px;
      box-sizing: border-box;
      margin-right: 100px;
      margin-bottom: 100px;
      cursor: pointer;
      &-pic{
        width:340px;
        height: 336px;
        margin: 0 auto;
        @include display(center,center);
        img{
          max-width: 100%;
          max-width: 100%;
          width: auto;
          height: auto;
        }
      }
      .model{
        width: 74.99px;
        height: 41px;
        background-color: #273443;
        text-align: center;
        line-height: 41px;
        color: #fff;
        font-size:26px;
        margin: 34.32px 0 0 42.38px;
      }
      .modelNum{
        font-size: 52px;
        line-height: 75px;
        color: #273443;
        font-weight: bold;
        margin-left: 44px;
        margin-top: -10px;
      }
      .modelDetail{
        margin:96px 42.38px 0 42.38px;
        p{
          font-size: 24px;
          line-height:43px;
          color: #273443;
          opacity: 0.5;
          // word-break: keep-all;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .page1-item:nth-child(3n){
      margin-right: 0;
    }
  }
  .page1-detail{
    width: 100%;
    margin: r(281) 0 r(0);
    padding: 0 r(226) 0 r(150);
    box-sizing: border-box;
    @include display(top,between);
    &-l{
      width: r(697);
      height: r(714);
      position: relative;
      img{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      p{
        position:absolute;
        top: r(-94);
        left: 0;
        font-size: r(200);
        font-weight: bold;
        color: #273443;
        opacity: 0.1;
        // z-index: 0;  
      }
    }
    &-r{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .label{
        width: r(137);
        height: r(50);
        line-height: r(50);
        text-align: center;
        border: r(1) solid #273443;
        margin-bottom: r(42);
      }
      .introduce{
        line-height: r(101);
        font-size: r(70);
        color: #E15100;
        font-weight: bold;
      }
      .name{
        line-height: r(101);
        font-size: r(70);
        color: #273443;
        font-weight: bold;
      }
      .detail{
        font-size: r(32);
        line-height: r(58);
        color: 273443;
        opacity: .5;
        text-align: right;
        width: r(692);
        margin-top: r(83);
      }
    }
  }
}

.contain {
  animation-duration: 500ms;
}
</style>